<template>
    <SysDialog :title="dialog.title" :visible="dialog.visible" :width="dialog.width" :height="dialog.height"
        @onClose="onCloseDialog" @onConfirm="onConfirmDialog">
        <template v-slot:content>
            <el-form :model="sortModel" ref="sortRef" :rules="articleSortRules" label-width="85px" :inline="false">
                <el-form-item label="上级分类">
                    <el-tree-select v-model="sortModel.pid" :data="sortParentList" check-strictly class="pid">
                    </el-tree-select>
                </el-form-item>
                <el-form-item label="分类名称" prop="name">
                    <el-input v-model="sortModel.name"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="is_active">
                    <el-switch v-model="sortModel.is_active" inline-prompt active-text="启用" inactive-text="禁用"
                        :width="50" />
                </el-form-item>
                <el-form-item label="排序" prop="ord">
                    <el-input v-model="sortModel.ord"></el-input>
                </el-form-item>
            </el-form>
        </template>
    </SysDialog>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'

import { ElForm, ElMessage } from 'element-plus'

import SysDialog from '@/components/SysDialog.vue'
import useDialog, { DialogType } from '@/hooks/useDialog'
import useInstance from '@/hooks/useInstance'
import useArticleSortModel, { IArticleSort } from '@/composables/article/useArticleSortModel'
import { postArticleSortApi, putArticleSortApi } from '@/http/api/article'

const { dialog, onShowDialog, onCloseDialog } = useDialog()
const { global } = useInstance()
const { iArticleSortModel, articleSortRules } = useArticleSortModel()

// 接受父组件传进来的数据
defineProps(['sortParentList'])
// 调用父组件方法
const emit = defineEmits(['newGetSortList'])

// 菜单绑定数据
const sortModel = reactive<IArticleSort>(iArticleSortModel())
// 菜单ref属性
const sortRef = ref<InstanceType<typeof ElForm>>()
// 弹窗显示
const onShow = (dialogType: string, title: string, editData?: any) => {
    global.$resetForm(sortRef.value, sortModel, iArticleSortModel)
    dialog.title = title
    dialog.width = '360px'
    dialog.height = '200px'
    onShowDialog()
    if (editData && dialogType == DialogType.EDIT) {
        global.$objCoppy(editData, sortModel)
    }
    sortModel.type = dialogType
}
// 弹窗确定
const onConfirmDialog = () => {
    sortRef.value?.validate(valid => {
        if (valid) {
            if (sortModel.type == DialogType.ADD) {
                addSort(sortModel)
            }
            if (sortModel.type == DialogType.EDIT) {
                editSort(sortModel)
            }
        }
    })
}
// 添加菜单
const addSort = async (sortModel: IArticleSort) => {
    await postArticleSortApi(sortModel).then(res => {
        if (res && res.code == 201) {
            ElMessage.success('添加成功！')
            emit('newGetSortList')
            global.$resetForm(sortRef.value, sortModel, iArticleSortModel)
            onCloseDialog()
        } else {
            ElMessage.error(res.msg)
        }
    })
}
// 修改菜单
const editSort = async (sortModel: IArticleSort) => {
    await putArticleSortApi(sortModel.id, sortModel).then(res => {
        if (res && res.code == 202) {
            ElMessage.success('修改成功！')
            emit('newGetSortList')
            global.$resetForm(sortRef.value, sortModel, iArticleSortModel)
            onCloseDialog()
        } else {
            ElMessage.error(res.msg)
        }
    })
}

// 暴露法方给父组件
defineExpose({ onShow })

</script>

<style scoped lang='scss'>
.pid {
    width: 100%;
}
</style>